<template>
  <div> 
   
    <div class="line1">
      <!-- 新增 -->
      <div class="line1"> 
        <el-button type="primary" v-if="userAll.sid == 7 || role == 'manager'" class="el-icon-plus" @click="add()">添加供应商</el-button>
        <el-button type="primary" @click="findAll()">全部</el-button>
        <el-button  @click="findEnable()" >启用</el-button>
        <el-button  @click="findDisable()" >禁用</el-button>
      </div> 
      <!--  多条件搜索 -->
      <div class="line1">
        <div class="line1">
          <el-input v-model="condition" placeholder="请输入供应商名称、信用代码"></el-input>
          <el-button type="primary" @click="search()">搜索</el-button>
          <el-button type="success" class="el-icon-refresh" @click="refresh()" circle></el-button>
          <el-button v-if="(userAll.sid == 7 && (role.endsWith('m') || role.endsWith('x'))) || role == 'manager'" type="primary" @click="generatedExcel" round>导出数据</el-button>
        </div>
      </div>
    </div>
    <!-- 表格 -->
    <div>
      <template>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%">
          <el-table-column
            prop="name"
            label="供应商名称"
            width="150"
            align="center">
          </el-table-column>
          <el-table-column
            prop="uniformCreditCode"
            label="统一信用代码"
            width="165"
            align="center">
          </el-table-column>
          <el-table-column
            prop="abbreviation"
            label="简称"
            width="70"
            align="center">
          </el-table-column>
          <el-table-column
            prop="mark"
            label="代号"
            width="70"
            align="center">
          </el-table-column>
          <el-table-column
            prop="encoding"
            label="编码"
            width="70"
            align="center">
          </el-table-column>
          <el-table-column
            prop="area"
            label="区域"
            width="100"
            align="center">
          </el-table-column>
          <el-table-column
            prop="adminName"
            label="经办人"
            width="80"
            align="center">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="160"
            align="center">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            width="50"
            align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.acct == 0">启用</div>
              <div v-if="scope.row.acct == 1">禁用</div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="(userAll.sid == 7 && (role.endsWith('m') || role.endsWith('x'))) || role == 'manager'"
              label="启用/禁用"
              width="110"
              align="center">
              <template slot-scope="scope">
                <el-button v-if="scope.row.acct == 1" class="el-icon-turn-off" type="danger" @click="enable(scope.row.id)" round></el-button>
                <el-button v-if="scope.row.acct == 0" class="el-icon-open" type="primary" @click="disable(scope.row.id)" round></el-button>
              </template>
            </el-table-column>
            <el-table-column
            label="操作"
            width="280">
            <template slot-scope="scope">
              <el-button type="success" class="el-icon-tickets" @click="details(scope.row)"></el-button>
              <el-button type="primary" v-if="scope.row.acct == 0 && (userAll.sid == 7 || role == 'manager')" class="el-icon-edit" @click="updateR(scope.row)"></el-button>
              <el-button type="danger" v-if="scope.row.acct == 0 && ((userAll.sid == 7 && (role.endsWith('m') || role.endsWith('x'))) || role == 'manager' )" class="el-icon-delete-solid" @click="del(scope.row.id)"></el-button>
              <el-button v-if="scope.row.acct == 0 && scope.row.att == 0 && (userAll.sid == 7 || role == 'manager')" class="el-icon-star-on" @click="noatt(scope.row.id)" circle></el-button>
              <el-button v-if="scope.row.acct == 0 && scope.row.att == 1 && (userAll.sid == 7 || role == 'manager')" class="el-icon-star-off" @click="att(scope.row.id)" circle></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <!-- 分页插件 -->
    <div class="block" style="margin: auto">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page=page
        :page-sizes="[5, 10, 20, 40]"
        :page-size=size
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
      </el-pagination>
    </div>
    <!-- 查询抽屉 -->
    <div>
      <el-drawer
        title="供应商详情"
        :visible.sync="drawer"
        :direction="direction"
        size='75%'>
        <div>
          <el-descriptions>
            <el-descriptions-item label="供应商名称">{{ rowDetail.name}}</el-descriptions-item>
            <el-descriptions-item label="头像">
              <el-image 
                style="width: 35px; height: 35px"
                :src=rowDetail.image 
                :preview-src-list="[rowDetail.image,rowDetail.image]">
              </el-image>
            </el-descriptions-item>
            <el-descriptions-item label="简称">{{rowDetail.abbreviation}}</el-descriptions-item><br>
            <el-descriptions-item label="信用代码">{{rowDetail.uniformCreditCode}}</el-descriptions-item>
            <el-descriptions-item label="代号">{{rowDetail.mark}}</el-descriptions-item>
            <el-descriptions-item label="编码">{{rowDetail.encoding}}</el-descriptions-item><br>
            <el-descriptions-item label="区域">{{rowDetail.area}}</el-descriptions-item>
            <el-descriptions-item label="余额">{{rowDetail.balance}}</el-descriptions-item>
            <el-descriptions-item label="VIP等级">{{rowDetail.vipLevel}}</el-descriptions-item><br>
            <el-descriptions-item label="邮箱">{{rowDetail.email}}</el-descriptions-item>
            <el-descriptions-item label="是否关注">
              <div v-if="rowDetail.att == 0" style="color: blue;">已关注</div>
              <div v-if="rowDetail.att == 1">未关注</div>
              </el-descriptions-item>
            <el-descriptions-item label="供应商状态">
              <div v-if="rowDetail.acct == 0" style="color: blue;">启用</div>
              <div v-if="rowDetail.acct == 1" style="color: red;">禁用</div>
            </el-descriptions-item><br>
            <el-descriptions-item label="创建时间">{{rowDetail.createTime}}</el-descriptions-item>
            
          </el-descriptions>
        </div>
        <!-- 流水记录 -->
        <h5>{{rowDetail.name}}的流水记录</h5>
        <div>
          <template>
            <el-table
              :data="blotterData"
              stripe
              style="width: 80%">
              <el-table-column
                prop="id"
                label="编号"
                align="center">
              </el-table-column>
              <el-table-column
                prop="name"
                label="供应商名称"
                align="center">
              </el-table-column>
              <el-table-column
                prop="sno"
                label="账单编号"
                align="center">
              </el-table-column>
              <el-table-column
                prop="status"
                label="账单类型"
                align="center">
                <template slot-scope="scope">
                  <div v-if="scope.row.status == 0">充值</div>
                  <div v-if="scope.row.status == 1">定金</div>
                  <div v-if="scope.row.status == 2">尾款</div>
                  <div v-if="scope.row.status == 3">退款</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="totalPrice"
                label="总价"
                align="center">
              </el-table-column>
              <el-table-column
                prop="adminName"
                label="经办人"
                align="center">
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="创建时间"
                align="center">
              </el-table-column>
            </el-table>
          </template>
        </div>
        <!-- 分页插件 -->
    <div class="block" style="margin: auto">
      <el-pagination
        @size-change="handleSizeChange2"
        @current-change="handleCurrentChange2"
        :current-page=page2
        :page-sizes="[5, 10, 20, 40]"
        :page-size=size2
        layout="total, sizes, prev, pager, next, jumper"
        :total=total2>
      </el-pagination>
    </div>
    <div style="float: right;">
      <el-button v-if="(userAll.sid == 7 && role.endsWith('m')) || role == 'manager' || role.endsWith('x')" type="primary" @click="blotterExcel" round>导出数据</el-button>
    </div>
      </el-drawer>
    </div>
    <!-- 对话框 -->
    <div>
      <el-dialog
        title="可以修改的内容"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose">
        <el-form ref="form" :model="rowDetail" label-width="80px">
          <el-form-item label="新的名称">
            <el-input v-model="rowDetail.name"></el-input>
          </el-form-item>
          <el-form-item label="新的简称">
            <el-input v-model="rowDetail.abbreviation"></el-input>
          </el-form-item>
          <el-form-item label="新的区域">
            <el-input v-model="rowDetail.area"></el-input>
          </el-form-item>
          <el-form-item label="新的代号">
            <el-input v-model="rowDetail.mark"></el-input>
          </el-form-item>
          <el-form-item label="新的编码">
            <el-input v-model="rowDetail.encoding"></el-input>
          </el-form-item>
          <el-form-item label="新的邮箱">
            <el-input v-model="rowDetail.email"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="commit()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
 export default{
  data(){
    return {
      tableData:[],
      page:1,
      size:5,
      total:0,
      page2:1,
      size2:5,
      total2:0,
      drawer: false,
      direction: 'btt',
      rowDetail:{},
      blotterData:[],
      dialogVisible: false,
      userAll:{},
      role:'',
      condition:'',
      type:1,
      acct:''
    }
  },
  methods:{
     //分页
     handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val
      this.getVendorPageData()
    },
    handleCurrentChange(val) {//修改页码时触发
      console.log(`当前页: ${val}`);
      //给当前页属性赋值
      this.page = val
      //发请求获取数据  调用方法
      this.getVendorPageData()
    },
    getVendorPageData: function(){
      if(this.acct == ''){
        this.$axios.get("businessCompetitor/findClientAll/"+this.type+"/"+ this.page + "/"+ this.size).then(res => {
        console.log(res.data)
        // 将数据渲染到页面上
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      })
      }else{
        this.$axios.get("businessCompetitor/findClientByAcct/"+this.acct+"/"+this.type+"/"+this.page+"/"+this.size).then(res => {
        console.log(res.data)
        // 将数据渲染到页面上
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      })
      }
      
    },
    //详情分页
    handleSizeChange2(val) {
      console.log(`每页 ${val} 条`);
      this.size2 = val
      this.getBlotterData()
    },
    handleCurrentChange2(val) {//修改页码时触发
      console.log(`当前页: ${val}`);
      //给当前页属性赋值
      this.page2 = val
      //发请求获取数据  调用方法
      this.getBlotterData()
    },
    getBlotterData:function(){
      let data = {
        name:this.rowDetail.name,
        page:this.page2,
        size:this.size2
      }
      this.$axios.post("finance/findBlotter/",data).then(res => {
        console.log(res.data);  
        this.blotterData = res.data.data.records
          this.total2 = res.data.data.total
      })
    },
    //对话框
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    //添加供应商
    add:function(){
      this.$router.push("/addVendor")
    },
    //多条件查询
    search(){
      let data = {
        condition:this.condition,
        type:1,
        page:1,
        size:this.size
      }
      console.log(data);
      this.$axios.post("businessCompetitor/conditionsFindBus",data).then(res => {
        console.log(res.data);
        this.tableData = res.data.data.records
        this.total = res.data.data.total
        this.condition = ''
      })
      
    },
    //查询全部
    findAll(){
      this.acct=''
      this.page = 1
      this.getVendorPageData()
    },
    //查询启用
    findEnable(){
      this.acct = "0"
      this.page = 1
      this.getVendorPageData()
    },
    //查询禁用
    findDisable(){
      this.acct = "1"
      this.page = 1
      this.getVendorPageData()
    },
    //刷新
    refresh(){
      this.acct=''
      this.page = 1
      this.getVendorPageData()
    },
    //启用
    enable(id){
      let type = 1
      this.$axios.put("businessCompetitor/openById/"+id+"/"+type+"/"+this.page+"/"+this.size).then(res => {
        console.log(res.data)
        if(res.data.code == 200){
          // 将数据渲染到页面上
        this.tableData = res.data.data.records
        this.total = res.data.data.total
        this.$message.success("启用成功")
        }else{
          this.$message.error("启用失败")
        }
      })
    },
    //禁用
    disable(id){
      let type = 1
      this.$axios.put("businessCompetitor/closeById/"+id+"/"+type+"/"+this.page+"/"+this.size).then(res => {
        console.log(res.data)
        if(res.data.code == 200){
          // 将数据渲染到页面上
        this.tableData = res.data.data.records
        this.total = res.data.data.total
        this.$message.success("禁用成功")
        }else{
          this.$message.error("禁用失败")
        }
      })
    },
    //关注
    att(id){
      let type = 1
      this.$axios.put("businessCompetitor/attBusById/"+id+"/"+type+"/"+this.page+"/"+this.size).then(res => {
        console.log(res.data)
        if(res.data.code == 200){
          // 将数据渲染到页面上
        this.tableData = res.data.data.records
        this.total = res.data.data.total
        this.$message.success("关注成功")
        }else{
          this.$message.error("关注失败")
        }
      })
    },
    //取关
    noatt(id){
      let type = 1
      this.$axios.put("businessCompetitor/noAttBusById/"+id+"/"+type+"/"+this.page+"/"+this.size).then(res => {
        console.log(res.data)
        if(res.data.code == 200){
          // 将数据渲染到页面上
        this.tableData = res.data.data.records
        this.total = res.data.data.total
        this.$message.success("取关成功")
        }else{
          this.$message.error("取关失败")
        }
      })
    },
    //查看详情
    details(scope){
      this.rowDetail = scope
      this.getBlotterData()
      this.drawer = true
    },
    //修改
    updateR(scope){
      this.rowDetail = scope
      this.dialogVisible = true
    },
    //提交修改
    commit(){
      let data={
          id:this.rowDetail.id,
          name:this.rowDetail.name,
          abbreviation:this.rowDetail.abbreviation,
          mark:this.rowDetail.mark,
          encoding:this.rowDetail.encoding,
          area:this.rowDetail.area,
          email:this.rowDetail.email,
      }
      console.log(data);
      this.$axios.post("businessCompetitor/updateBusById",data).then(res => {
        if(res.data.code == 200){
          this.$message.success("修改成功")
          this.dialogVisible = false
        }else{
          this.$message.success("修改失败")
          this.dialogVisible = false
        }
      })
      
    },
    //删除
    del(id) {
        this.$confirm('此操作将永久删除当前行数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let type = 1
          this.$axios.delete("businessCompetitor/delBusById/"+id+"/"+type +"/" + this.page + "/"+this.size).then( res => {
            if(res.data.code == 200){
              this.tableData = res.data.data.records
              this.total = res.data.data.total
              this.$message.success("删除成功")
            }else{
              this.$message.error("删除失败")
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      //导出供应商
    generatedExcel(){
      this.$axios.post("export/vendorExcel",this.tableData).then(res => {
        if(res.data.code == 200){
            this.$message.success("导出成功")
          }else{
            this.$message.success("导出失败")
          }
      })
    },
    blotterExcel(){
      this.$axios.post("export/blotterExcel",this.blotterData).then(res => {
        if(res.data.code == 200){
            this.$message.success("导出成功")
          }else{
            this.$message.success("导出失败")
          }
      })
    }
  },
  mounted:function(){
    this.getVendorPageData()

    this.$axios.get("/user/findUserByAccount/" + window.localStorage.getItem("account")).then(res => {
        console.log(res.data.data);
        this.userAll = res.data.data;
        this.role = res.data.data.roleList[0].name;
        console.log(this.role);
      });
  }
}
</script>
<style scoped>
.line1{
  display: flex;
}
</style>